<template>
  <div class="todo-container">
    <h1>App</h1>
    <!-- 
      自定义事件 
        * 什么是自定义事件
          - 给子组件绑定一个自定义事件
          - 在子组件内部触发自定义事件,父组件的事件函数就可以调用,达到传值的目的
        * 给组件绑定事件
          - 只要给组件绑定事件,则都认为是自定义事件(必须我们自己触发)
          - 如果想要给组件绑定原生事件,则需要使用 `.native` 修饰符
        * 给组件绑定事件的方式
          1. 直接通过 v-on 指令给子组件绑定自定义事件,事件函数定义父组件中(事件函数的形参就是子组件触发事件时传递的值)
          2. 可以通过ref获取到组件实例,然后调用组件实例的$on方法绑定事件($on方法的第一个参数是事件名称,第二个参数是事件函数)
        * 触发当前组件的自定义事件方式
          1. 在组件实例上有一个$emit方法,可以触发当前组件的自定义事件($emit方法的第一个参数是事件名称,后边的参数都是向父组件传递的数据)
        * 解绑自定义事件
          - 我们可以调用子组件实例上的$off方法对子组件的自定义事件进行解绑
          - $off方法可以接受3种参数(1.字符串,代表解绑某个事件;2.数组,代表解绑一个或多个事件;3.没有参数,代表解绑所有事件)
     -->
    <button @click="handler">
      给content组件绑定一个自定义事件用来接收content组件的传值
    </button>
    <button @click="$refs.content.$off('abc')">
      父组件中的解绑abc事件按钮
    </button>
    <button @click="$refs.content.$off()">父组件中的解绑所有自定义事件</button>
    <button @click="$refs.content.$off(['abc', 'hello'])">
      父组件中的解绑abc 和 hello自定义事件
    </button>
    <Content ref="content"></Content>
  </div>
</template>

<script>
import Content from "@/components/Content";
export default {
  name: "App",
  components: {
    Content,
  },
  methods: {
    handler() {
      this.$refs.content.$on("abc", (a, b) => {
        console.log("abc事件触发", a, b);
      });
      this.$refs.content.$on("hello", () => {
        console.log("hello事件触发");
      });
    },
  },
};
</script>
